This PR is for investigation purposes only — not for merging.

Deep AI Analysis ( to be verified )

What was going wrong?

Preact has an internal system for handling events that cross shadow DOM boundaries. It uses a counter to avoid processing the same event twice.

Here's what was happening:

1. You press a key inside a <ui5-button> — the event fires inside the button's shadow root
2. That event then bubbles up to the <ui5-button> host element sitting inside ColorPalette's shadow DOM
3. The problem: Preact sometimes sees this as a duplicate event and skips the handler — especially if ColorPalette re-rendered between step 1 and step 2

The result? Key handlers like _onDefaultColorKeyDown and _onMoreColorsKeyDown silently don't fire, so focus stays stuck on the original element.

What did we change?

We moved the onKeyDown and onKeyUp handlers from the <Button> elements to their parent <div> wrappers.

Why does this fix it?

The issue boils down to how many shadow DOM boundaries the event crosses:

• Before: The event crossed two boundaries (button shadow root → button host → ColorPalette shadow DOM). Preact's deduplication system could get confused and skip the second handler.
• After: The handler lives on a plain <div> in the same shadow DOM scope. The event only passes through one Preact proxy, so there's no deduplication race and no skipped handlers.

The deduplication logic lives in the vendored Preact source at preact.module.js in the event proxy.